import { useEffect } from "react";
import { IRouteComponentProps, KnowLedgeModelState, useDispatch, useSelector } from "umi"
import styles from "./[id].less"
const KnowledgePageDetail: React.FC<IRouteComponentProps<{ id: string }>> = ({ match }) => {
  const { id } = match.params;
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: "knowLedge/getKnowLedgeDetail",
      payload: id
    })
  }, [])
  const { knowledgeDetailList } = useSelector((state: { knowLedge: KnowLedgeModelState }) => state.knowLedge);
  return <div className={styles.idBoxDiv}>
    {/* 头部 */}
    <div className={styles.container}>
      <div className={styles.containerBox}>
        <div className={styles.antBreadcrumb}>
          <span>
            <span>
              <a href="/knowledge">知识小册</a>
            </span>
            <span className={styles.SlashSpan}>
              /
            </span>
          </span>
          <span>
            {knowledgeDetailList.title}
          </span>
        </div>
      </div>
    </div>
    {/* 中间内容 */}
    <div className={styles.middleBox}>
      <div className={styles.middleBoxTop}>
        {/* 左边部分 */}
        <div className={styles.middleBoxTopLeft}>
          <div className={styles.middleBoxTopLeftBox}>
            <div className={styles.middleBoxTopLeftInner}>
              <p className={styles.headerDiv}>{knowledgeDetailList.title}</p>
              <main>
                {/* 中间内容头部 */}
                <div className={styles.mainDetailTop}>
                  <div className={styles.mainDetailTopOne}>
                    <img src={knowledgeDetailList.cover} alt="cover" />
                  </div>
                  <div className={styles.mainDetailTopTow}>
                    <div>
                      <p className={styles.mainDetailTopTowPOne}>{knowledgeDetailList.title}</p>
                      <p className={styles.mainDetailTopTowPTow}>{knowledgeDetailList.summary}</p>
                      <p className={styles.mainDetailTopTowThree}>
                        <span>
                          {knowledgeDetailList.views} 次阅读
                        </span>
                        <span className={styles.spanDian}>·</span>
                        <span><time dateTime={knowledgeDetailList.createAt}>{knowledgeDetailList.createAt}</time></span>
                      </p>
                      <div className={styles.mainDetailTopTowBottom}>
                        <button type="button" className="ant-btn ant-btn-primary"><span>开始阅读</span></button>
                      </div>
                    </div>
                  </div>
                </div>
                {/* 中间部分ul部分 */}
                <ul>
                  {
                    knowledgeDetailList.children?.map((item: any) => {
                      return <li style={{ opacity: 1, height: "44px" }} key={item.id}>
                        <a href="">
                          <span>{item.title}</span>
                        </a>
                      </li>
                    })
                  }
                </ul>
              </main>
            </div>
          </div>

        </div>
        <div className={styles.middleBoxTopRight}>
          1111
        </div>
      </div>
    </div>
  </div>
}
export default KnowledgePageDetail